<!-- 检索工具栏 -->
<template>
  <div class="wrap-search-tool">
    <WarningCenter />
    <div :class="{ 'wrap-tool-box': true, 'wrap-tool-animation': isOpen, 'wrap-tool-close': isClosed }">
      <img src="@/assets/images/viewIcon/icon_sy_sousuo.png" @click="handleOpen" />
      <div class="wrap-tool" v-show="isOpen">
        <img class="btn-closed" src="@/assets/images/viewIcon/icon_sy_closed.png" @click="handleClose" />
        <div class="split-line"></div>
        <img class="btn-more" src="@/assets/images/viewIcon/icon_sy_mapqh.png" @click="handleMore" />
        <Select v-model="valueParrent" placeholder="请选择" @on-change="handleChange">
          <Option v-for="(item, index) in optionsParrent" :key="index" :label="item.item_value" :value="item.item_value"> </Option>
        </Select>
        <Select v-model="valueChild" placeholder="请选择" filterable filter-by-label>
          <Option v-for="(item, index) in optionsChild" :key="index" :label="item.text" :value="item.text"> </Option>
        </Select>
        <Input v-model="searchValue" />
      </div>
      <div :class="{ 'wrap-drawer': true, 'wrap-drawer-animation': drawer, 'wrap-drawer-animation-in': !drawer }">
        <div class="wrap-drawer-item" v-for="(item, index) in schoolList" :key="index">
          <p class="wrap-drawer-item-title">{{ item.name }}</p>
          <ul>
            <li
              :class="{ 'wrap-drawer-info-item': true, 'wrap-drawer-info-item-checked': index === checkgroup && idx === checkItem }"
              v-for="(itm, idx) in item.list"
              :key="idx"
              @click="onSchoolCheck(itm, idx, index)"
            >
              {{ itm.item_value }}
            </li>
          </ul>
        </div>
        <div class="close-btn" @click="drawer = !drawer"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import axiosModel from '@/api'
  import WarningCenter from '@/components/WarningCenter'
  export default {
    data () {
      return {
        isOpen: false,
        isClosed: false,
        drawer: false,
        valueParrent: '',
        optionsParrent: [],
        valueChild: '',
        searchValue: '',
        optionsChild: [],
        optionsAllChildren: [],
        checkgroup: 0,
        checkItem: 0,
        currentOrgCode: '',
        schoolList: [
          {
            name: '校区选择',
            list: [
              {
                item_id: '1',
                item_key: '0',
                item_value: '徐汇'
              },
              {
                item_id: '2',
                item_key: '1',
                item_value: '徐汇'
              },
              {
                item_id: '3',
                item_key: '2',
                item_value: '江山'
              },
              {
                item_id: '4',
                item_key: '3',
                item_value: '奉贤'
              },
              {
                item_id: '5',
                item_key: '4',
                item_value: '江宁'
              }
            ]
          },
          {
            name: '学校组织机构',
            list: []
          }
        ]
      }
    },
    components: {
      WarningCenter
    },
    computed: {},
    created () {},
    mounted () {
      this.getMenuData()
      this.getCollegeList()
      this.getParentSearch()
      this.getChildSearch()
    },
    methods: {
      handleOpen () {
        this.isOpen && this.getBuildingInfo()
        this.isOpen = true
        this.isClosed = false
      },
      handleClose () {
        this.isClosed = true
        this.$emit('onClose')
        setTimeout(() => {
          this.isOpen = false
          this.valueParrent = ''
          this.valueChild = ''
          this.searchValue = ''
        }, 300)
      },
      handleMore () {
        this.drawer = true
      },
      handleChange (value) {
        let objKey = ''
        switch (value) {
          case '实验室':
            objKey = 'labClass'
            break
          case '化学品':
            objKey = 'chemicalClass'
            break
          case '气瓶':
            objKey = 'gasClass'
            break
          case '设备':
            objKey = 'equipClass'
            break
          default:
            break
        }
        this.optionsChild = this.optionsAllChildren[objKey]
      },
      onSchoolCheck (param, idx, index) {
        this.checkgroup = index
        this.checkItem = idx
        this.$emit('onSchoolCheck', param)
      },
      async getMenuData () {
        const { data } = await axiosModel.buildingQueryController.getDictItems()
        const { dataList } = data.rows
        this.schoolList[0].list = dataList
        this.currentOrgCode = dataList[0].item_id
      },
      async getCollegeList () {
        const { data } = await axiosModel.buildingQueryController.getCollegeList()
        this.schoolList[1].list = data.map(item => {
          return {
            ...item,
            item_value: item.org_name
          }
        })
      },
      async getParentSearch () {
        const { data } = await axiosModel.buildingQueryController.getParentSearch()
        const { dataList } = data.rows
        this.optionsParrent = dataList
      },
      async getChildSearch () {
        const { data } = await axiosModel.buildingQueryController.getChildSearch()
        this.optionsAllChildren = data
      },
      async getBuildingInfo () {
        const { data } = await axiosModel.buildingQueryController.getBuildingInfo({
          option: this.valueParrent,
          selectType: this.valueChild,
          content: this.searchValue
        })
        this.$emit('onSearch', data)
      }
    }
  }
</script>
<style lang="less" scoped>
  .wrap-search-tool {
    position: absolute;
    display: flex;
    right: 60px;
    top: 36px;
  }
  .wrap-tool-box {
    z-index: 4;
    cursor: pointer;
    right: 60px;
    top: 36px;
    width: 57px;
    height: 57px;
    background-color: rgba(18, 58, 155, 0.7);
    // background-image: url('~@/assets/images/viewIcon/icon_sy_sousuo.png');
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 1px solid #7fdff7;
    > img {
      width: 25px;
      height: 25px;
      position: absolute;
      margin-top: -12px;
      top: 50%;
      right: 16px;
    }
    .wrap-tool {
      transition: all 1s;
      width: 630px;
      height: 100%;
      display: flex;
      align-items: center;
      .split-line {
        width: 1px;
        height: 100%;
        background: #7fdff7;
      }
      .btn-closed {
        width: 22px;
        height: 22px;
        margin: 0 20px;
      }
      .btn-more {
        margin: 0 16px;
        width: 40px;
        height: 40px;
      }
      /deep/ .ivu-select {
        z-index: 88;
        width: 120px;
        margin-right: 16px;
      }
      /deep/ .ivu-select-input {
        color: #fff;
      }
      /deep/ .ivu-select-selection {
        background: rgba(142, 180, 249, 0.35);
        color: #fff;
        border: none;
      }
      /deep/ .ivu-select-dropdown {
        background: rgba(142, 180, 249, 0.76);
      }
      /deep/ .ivu-select-arrow {
        color: #fff;
      }
      /deep/ .ivu-select-item-selected {
        background: rgba(142, 180, 249, 1);
      }
      /deep/ .ivu-select-item-focus {
        background: rgba(142, 180, 249, 1);
      }
      /deep/ .ivu-select-placeholder {
        color: #fff !important;
      }
      /deep/ .ivu-select-item:hover {
        background: rgb(89, 144, 247);
      }
      /deep/ .ivu-select-item {
        color: #fff;
      }
      /deep/ .ivu-input-wrapper {
        width: 193px;
        border: none;
        input {
          background: rgba(142, 180, 249, 0.35);
          border: none;
          color: #fff;
        }
      }
    }
  }
  .wrap-tool-animation {
    animation: mymove 0.4s linear forwards;
    @keyframes mymove {
      0% {
        width: 57px;
        border-radius: 33px;
        overflow: hidden;
      }
      99% {
        width: 663px;
        border-radius: 33px;
        overflow: hidden;
        // background-position: 620px center;
      }
      100% {
        width: 663px;
        border-radius: 33px;
      }
    }
    @-webkit-keyframes mymove /*Safari and Chrome*/ {
      from {
        width: 57px;
        border-radius: 33px;
        overflow: hidden;
      }
      to {
        width: 663px;
        border-radius: 33px;
        overflow: hidden;
      }
    }
  }
  .wrap-tool-close {
    animation: closed 0.4s linear forwards;
    @keyframes closed {
      0% {
        width: 663px;
        border-radius: 33px;
        overflow: hidden;
      }
      100% {
        width: 57px;
        border-radius: 33px;
        overflow: hidden;
      }
    }
    @-webkit-keyframes closed /*Safari and Chrome*/ {
      from {
        width: 663px;
        border-radius: 33px;
        overflow: hidden;
      }
      to {
        width: 57px;
        border-radius: 33px;
        overflow: hidden;
      }
    }
  }
  .wrap-drawer {
    position: fixed;
    top: 0;
    left: -437px;
    height: 100%;
    width: 437px;
    background: rgba(6, 6, 6, 0.9);
    padding: 152px 23px 50px 44px;
    &-item {
      height: 50%;
      width: 100%;
      &-title {
        width: 100%;
        height: 48px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 48px;
        text-indent: 50px;
        background: url('~@/assets/images/viewIcon/icon_sy_mapqh_txtbg.png') no-repeat center;
      }
      ul {
        height: calc(100% - 88px);
        overflow-y: auto;
        margin: 20px 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        .wrap-drawer-info-item {
          text-indent: 50px;
          font-size: 18px;
          font-weight: 500;
          color: rgba(103, 141, 225, 1);
          line-height: 58px;
        }
      }
    }
    .close-btn {
      position: absolute;
      top: 47px;
      right: 35px;
      width: 22px;
      height: 22px;
      background: url('~@/assets/images/viewIcon/icon_sy_mapqh_closed.png');
    }
  }
  .wrap-drawer-animation {
    animation: isClosed 0.5s ease forwards;
    @keyframes isClosed {
      0% {
        left: -437px;
      }
      100% {
        left: 0;
      }
    }
  }
  .wrap-drawer-animation-in {
    animation: isOpen 0.5s ease forwards;
    @keyframes isOpen {
      0% {
        left: 0;
      }
      100% {
        left: -437px;
      }
    }
  }
  .wrap-drawer-info-item-checked {
    color: #fff !important;
  }
</style>

<style lang="less">
  ::-webkit-scrollbar {
    width: 6px;
    height: 3px;
  }

  // 滚动条里面小方块
  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #7fdff7;
  }
  //滚动条里面轨道
  ::-webkit-scrollbar-track {
    border-radius: 6px;
    background: #3569cc;
  }
  ::-webkit-scrollbar-resizer,
  ::-webkit-resizer {
    background: #153461;
  }
  ::-webkit-scrollbar-corner {
    display: none;
  }
</style>
